<template>
  <div>
    <el-tabs type="card" v-if="config">
      <el-tab-pane label="流程权重管理">
        <el-form
          style="overflow: auto; margin: 30px; height: 60vh"
          label-width="180px"
          label-position="left"
        >
          <el-form-item
            v-for="flow in config.Flows"
            :label="flow.FLOW_Name"
            :key="flow.FLOW_ID"
          >
            <div style="display: flex; align-items: center">
              <el-slider
                style="width: 400px"
                v-model="flow.FLOW_Score"
                :min="0"
                :max="100"
              ></el-slider>
              <span style="margin-left: 10px">
                {{ flow.FLOW_Score }}
              </span>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="节点权重管理">
        <el-form
          style="overflow: auto; margin: 30px; height: 60vh"
          label-width="180px"
          label-position="left"
        >
          <el-form-item
            v-for="step in config.Steps"
            :label="'[' + step.FLOW_Name + ']' + step.FLS_Name"
            :key="step.FLS_ID"
          >
            <div style="display: flex; align-items: center">
              <el-slider
                style="width: 400px"
                v-model="step.FLS_Score"
                :min="0"
                :max="100"
              ></el-slider>
              <span style="margin-left: 10px">
                {{ step.FLS_Score }}
              </span>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button
      style="
        position: fixed;
        right: 100px;
        bottom: 100px;
        width: 100px;
        height: 60px;
      "
      type="primary"
      round
      @click="saveConfig"
    >
      保存
    </el-button>
  </div>
</template>
<script>
import { getConfig, saveConfig } from '@/api/flowCenter/flow/flowScore'
export default {
  data: function () {
    return {
      config: null,
    }
  },
  methods: {
    getConfig() {
      getConfig().then(({ data }) => {
        this.config = data
      })
    },
    saveConfig() {
      saveConfig(this.config).then(() => {
        this.$message('保存成功')
        this.getConfig()
      })
    },
  },
  mounted() {
    this.getConfig()
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(100% - 130px);
  padding: 10px;
}
.el-table::before {
  z-index: inherit;
}
</style>